<!-- 素材选择 -->
<template>
  <BasicModal 
    v-bind="$attrs" 
    @register="registerModal" 
    :title="title" 
    width="1200px"  
    @ok="handleSubmit" 
    destroyOnClose 
  >
    <PageWrapper :sidebarWidth="260">
      <template #sidebar>
        <MyTreeSelect 
          v-bind="treeProps" 
          @select="onTreeSelect" 
          ref="materialGroupTreeRef"
        />
      </template>
      
      <a-tabs :defaultActiveKey="MaterialType.IMAGE.type" v-if="!materialType" @change="handleChange">
        <a-tab-pane v-for="item in MaterialType" :tab="item.name" :key="item.type" force-render>
        </a-tab-pane>
      </a-tabs>

      <div >
        <MaterialList 
          :groupId="materialGroupId" 
          :materialType="activeMaterialType" 
          @open-group="handleOpenGroup" 
          @select-change="handleSelectChange" 
          :selectCount="selectCount"
          :isSelectModel="true"/>
      </div>
      <MeterialGroupModal @register="registerMeterialGroupModal" @success="handleSaveOrUpdateGroupSuccess" />
    </PageWrapper>
  </BasicModal>
</template>
<script lang="ts" setup>
import {computed, onUnmounted, provide, ref, unref, watchEffect} from 'vue';
import {useDesign} from '/@/hooks/web/useDesign'
import {BasicModal, useModal, useModalInner} from '/@/components/Modal';
import {MyTreeProps, MyTreeSelect} from '/@/components/BizTreeSelect';
import {listDataGroupTree} from '/@/api/infra/dataGroup'
import MaterialList from './components/MaterialList.vue'
import {MaterialType} from './material.data'
import MeterialGroupModal from './components/MeterialGroupModal.vue'
import {propTypes} from '/@/utils/propTypes';
import {PageWrapper} from '/@/components/Page';
import {DataGroupBizType} from '/@/api/infra/model/dataGroup'
import {deleteGroup} from './material.api'
import {useAttrs} from '/@/hooks/core/useAttrs';

const attrs = useAttrs({ excludeDefaultKeys: false });

// 声明Emits
const emit = defineEmits(['register', 'success', 'select-change']);

const props = defineProps({
  // 素材类型
  materialType: propTypes.string,
  // 可以选择的数量
  selectCount: propTypes.number.def(1)
});

const treeProps = ref<MyTreeProps>({
  searchField: 'name',
  api: listDataGroupTree,
  immediate: true,
  params: { 
    bizType: DataGroupBizType.MATERIAL, 
    groupType: MaterialType.IMAGE.type
  },
  enableDelete: true,
  deleteApi: deleteGroup
})

const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  setModalProps({ defaultFullscreen: true })
});

const title = computed(() => {
  for (const key in MaterialType) {
    if (props.materialType === MaterialType[key].type) {
      return `选择${MaterialType[key].name}`
    }
  }
  return `选择素材`
});

let timer = null
const activeMaterialType = ref(MaterialType.IMAGE.type)
const materialGroupTreeRef = ref<any>()
const slectedRows = ref<any[]>([])
const [registerMeterialGroupModal, { openModal: openMeterialGroupModal }] = useModal();
const { prefixCls } = useDesign('material')
provide('prefixCls', prefixCls)

// 当前选中的分组
let materialGroupId = ref()

watchEffect(() => {
  if (props.materialType) {
    activeMaterialType.value = props.materialType
    treeProps.value.params = { 
      groupType: props.materialType,
      bizType: DataGroupBizType.MATERIAL, 
    }
    materialGroupTreeRef.value.reload()
  }
  console.log('-------------------------', props);
    
})

const handleChange = async (e) => {
  console.log('tab: ', e);
  clearTimeout(timer)
  timer = null
  // 避免切换tab卡顿
  timer = setTimeout(() => {
    activeMaterialType.value = e
    treeProps.value.params.groupType = e
  }, 200)
}

// 左侧树选择后触发
function onTreeSelect(data) {
  console.log('onTreeSelect', data);
  materialGroupId.value = data
}

const handleOpenGroup = (materialType) => {
  openMeterialGroupModal(true, {
    isUpdate: false,
    materialType
  })
}

const handleSaveOrUpdateGroupSuccess = () =>  materialGroupTreeRef.value.reload()

onUnmounted(() => {
  clearTimeout(timer)
  timer = null
})

const handleSelectChange = (rows) =>  slectedRows.value = rows 

async function handleSubmit(v) {
  closeModal();
  emit('select-change', unref(slectedRows))
}
</script>

<style lang="less">

</style>
